<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tibetan's Craiglist</title>

<script type="text/javascript">
	$(function() {

		// Tabs
		$('#tabs').tabs();

		//hover states on the static widgets
		$('#dialog_link, ul#icons li').hover(function() {
			$(this).addClass('ui-state-hover');
		}, function() {
			$(this).removeClass('ui-state-hover');
		});

	});
</script>

</head>
<body>

	
	<div id="tabs">
		<ul>
			<c:set var="hash" value="#" />
			<c:forEach var="country" items="${countries}">
				<li><a href='<c:out value="${hash}${country.name}"/>'>${country.name}</a>
				</li>
			</c:forEach>
		</ul>



		<c:forEach var="country" items="${countries}">
			<div id='<c:out value="${country.name}"></c:out>'>
				<h4 id="allCountriesPage">
					<c:out value="${country.name}" />
				</h4>
				<c:set var="numberofstates" value="${fn:length(country.states)}"
					scope="page" />
				<div class="colmask">
					<div class="colmid">
						<div class="colin">
							<div class="colleft">

								<div class="box_1">
									<c:forEach var="state" items="${country.states}" begin="0"
										end="${numberofstates/4}" step="1">
										<div class="state_delimiter">
											<c:out value="${state.name}" />
										</div>
										<ul>
											<c:forEach var="region" items="${state.regions}">
												<li><a href="<c:url value="/region?country=${country.name}&region=${region.name}"/>"><c:out
															value="${region.name}" />
												</a>
												</li>
											</c:forEach>
										</ul>
									</c:forEach>
								</div>
								<div class="box_2">
									<c:forEach var="state" items="${country.states}"
										begin="${numberofstates/4+1}" end="${2*numberofstates/4}"
										step="1">
										<div class="state_delimiter">
											<c:out value="${state.name}" />
										</div>
										<ul>
											<c:forEach var="region" items="${state.regions}">
												<li><a href="<c:url value="/region?country=${country.name}&region=${region.name}"/>"><c:out
															value="${region.name}" />
												</a>
												</li>
											</c:forEach>
										</ul>
									</c:forEach>
								</div>
								<div class="box_3">
									<c:forEach var="state" items="${country.states}"
										begin="${2*numberofstates/4+1}" end="${3*numberofstates/4}"
										step="1">
										<div class="state_delimiter">
											<c:out value="${state.name}" />
										</div>
										<ul>
											<c:forEach var="region" items="${state.regions}">
												<li><a href="<c:url value="/region?country=${country.name}&region=${region.name}"/>"><c:out
															value="${region.name}" />
												</a>
												</li>
											</c:forEach>
										</ul>
									</c:forEach>
								</div>
								<div class="box_4">
									<c:forEach var="state" items="${country.states}"
										begin="${3*numberofstates/4+1}" end="${numberofstates}"
										step="1">
										<div class="state_delimiter">
											<c:out value="${state.name}" />
										</div>
										<ul>
											<c:forEach var="region" items="${state.regions}">
												<li><a href="<c:url value="/region?country=${country.name}&region=${region.name}"/>"><c:out
															value="${region.name}" />
												</a>
												</li>
											</c:forEach>
										</ul>
									</c:forEach>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</c:forEach>
	</div>
</body>
</html>